<template>
    <div id="form">
        <Form ref="formValidate" :model="goodsInfo" :label-width="130">

            <FormItem label="轮播图" class="item">
                <template>
                    <div class="demo-upload-list" v-for="(item,index) in bannerImages" :key="index">
                        <img :src="item.url" v-if="item.ext =='jpg'|| item.ext =='jpeg'|| item.ext =='png' "/>
                        <video :src="item.url" v-else></video>
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="handleView(item.url,item.ext)"></Icon>
                            <Icon type="ios-trash-outline" @click.native="handleRemove(index,0)"></Icon>
                        </div>
                    </div>
                    <Upload
                            ref="upload1"
                            name="image"
                            :show-upload-list="false"
                            :on-success="handleSuccess1"
                            :format="['jpg','jpeg','png']"
                            :on-format-error="handleFormatError"
                            multiple
                            type="drag"
                            :action="action_url"
                            style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="ios-camera" size="20"></Icon>
                        </div>
                    </Upload>
                    <Modal title="图片预览" v-model="visible">
                        <img :src="imgUrl" v-if="imgType == '0'" style="width: 100%">
                        <video :src="imgUrl" v-else style="width: 100%" controls="controls"></video>
                    </Modal>
                </template>
            </FormItem>
            <FormItem label="活动图一标题" class="item">
                <Input type="text" v-model="goodsInfo.active_title1" placeholder="请输入标题" style="width: 200px;"></Input>
                <Input type="text" v-model="goodsInfo.active_sub_title1" placeholder="请输入副标题"
                       style="width: 200px;margin-left: 10px;"></Input>
            </FormItem>
            <FormItem label="活动图一" class="item">
                <Upload
                        ref="upload"
                        name="image"
                        :action="action_url"
                        :show-upload-list="false"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="handleFormatError"
                        :on-success="activeImgSuccess1">
                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                </Upload>
            </FormItem>
            <FormItem class="item">
                <img :src="goodsInfo.active_img1" style="width: 200px;height: 200px;"
                     v-show="goodsInfo.active_img1 != ''">
            </FormItem>
            <FormItem label="活动图二标题" class="item">
                <Input type="text" v-model="goodsInfo.active_title2" placeholder="请输入标题" style="width: 200px;"></Input>
                <Input type="text" v-model="goodsInfo.active_sub_title2" placeholder="请输入副标题"
                       style="width: 200px;margin-left: 10px;"></Input>
            </FormItem>

            <FormItem label="活动图二" class="item">
                <Upload
                        ref="upload"
                        name="image"
                        :action="action_url"
                        :show-upload-list="false"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="handleFormatError"
                        :on-success="activeImgSuccess2">
                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                </Upload>
            </FormItem>
            <FormItem class="item">
                <img :src="goodsInfo.active_img2" style="width: 200px;height: 200px;"
                     v-show="goodsInfo.active_img2 != ''">
            </FormItem>
            <FormItem label="活动图三标题" class="item">
                <Input type="text" v-model="goodsInfo.active_title3" placeholder="请输入标题" style="width: 200px;"></Input>
                <Input type="text" v-model="goodsInfo.active_sub_title3" placeholder="请输入副标题"
                       style="width: 200px;margin-left: 10px;"></Input>
            </FormItem>
            <FormItem label="活动图三" class="item">
                <Upload
                        ref="upload"
                        name="image"
                        :action="action_url"
                        :show-upload-list="false"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="handleFormatError"
                        :on-success="activeImgSuccess3">
                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                </Upload>
            </FormItem>
            <FormItem class="item">
                <img :src="goodsInfo.active_img3" style="width: 200px;height: 200px;"
                     v-show="goodsInfo.active_img3 != ''">
            </FormItem>
            <FormItem label="分类图" class="item">
                <Upload
                        ref="upload"
                        name="image"
                        :action="action_url"
                        :show-upload-list="false"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="handleFormatError"
                        :on-success="handleSuccess">
                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                </Upload>
            </FormItem>
            <FormItem class="item">
                <img :src="goodsInfo.cate_img" style="width: 200px;height: 200px;"
                     v-show="goodsInfo.cate_img != ''">
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit">提交</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    import config from "@/config";

    const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
    const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
    export default {
        data() {
            return {
                action_url: baseUrl + "/admin/login/uploadImg",
                imgUrl: '',
                visible: false,
                imgType: '0',
                bannerImages: [],
                imageSize: 100,
                goodsInfo: {
                    bannerImg: [],
                    active_title1: '',
                    active_sub_title1: '',
                    active_img1: '',
                    active_title2: '',
                    active_sub_title2: '',
                    active_img2: '',
                    active_title3: '',
                    active_sub_title3: '',
                    active_img3: '',
                    cate_img: ''
                }
            };
        },
        methods: {
            getBannerInfo() {
                this.$axios('/adminadmin/SystemSet/getBanner', {}).then((result) => {
                    //轮播图
                    this.goodsInfo.bannerImg = result.bannerImg ? result.bannerImg : [];
                    let arr = [];
                    if (result.bannerImg != undefined) {
                        result.bannerImg.forEach(item => {
                            let ext = item.substring(item.lastIndexOf('.') + 1);
                            arr.push({'url': item, 'ext': ext});
                        });
                    }
                    this.bannerImages = arr;
                    //活动图
                    //分类图
                    this.goodsInfo.cate_img = result.cate_img;
                });
            },
            //图片类型错误
            handleFormatError(file) {
                this.$Notice.warning({
                    title: "文件格式错误",
                    desc: "不支持该文件类型",
                });
            },
            //分类图
            handleSuccess(res, file) {
                this.goodsInfo.cate_img = res.data.src;
            },
            //活动图一
            activeImgSuccess1(res, file) {
                this.goodsInfo.active_img1 = res.data.src;
            },
            activeImgSuccess2(res, file) {
                this.goodsInfo.active_img2 = res.data.src;
            },
            activeImgSuccess3(res, file) {
                this.goodsInfo.active_img3 = res.data.src;
            },
            //banner图或视频
            handleSuccess1(res, file) {
                let src = res.data.src;
                let ext = res.data.ext;
                this.bannerImages.push({'url': src, 'ext': ext});
                this.goodsInfo.bannerImg.push(src);
            },
            handleView(src, type) {
                if (type == 'jpg' || type == 'jpeg' || type == 'png') {
                    this.imgType = '0';
                } else {
                    this.imgType = '1';
                }
                this.visible = true;
                this.imgUrl = src;
            },
            handleRemove(index, type) {
                if (type == 0) {
                    this.bannerImages.splice(index, 1);
                    let arr = [];
                    this.bannerImages.forEach(item => {
                        arr.push(item.url);
                    });
                    this.goodsInfo.bannerImg = arr;
                }
            },
            //表单提交
            handleSubmit() {
                let params = {
                    ...this.goodsInfo,
                };
                this.$axios('/admin/admin/systemSet/saveBanner', params).then(res => {
                    if (res.code == 1) {
                        this.$Message.success(res.msg);
                    } else {
                        this.$Message.error(res.msg);
                    }
                });
            },
        },
        created() {
            this.getBannerInfo();
        },
    };
</script>

<style lang="less" scoped>
    #form {
        .item {
            width: 50%;
        }
    }
</style>
<style>
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
